<template>
	<view class="user">
		<view class="userPho">
			<view class="left">
				头像
			</view>
			<view class="right" @tap="upLoad">
				<view class="img">
					<image :src="userLogo" mode="scaleToFill"></image>
				</view>
				<view class="arrow">
					<image src="../../static/images/arrows-right.png" mode="scaleToFill"></image>
				</view>
			</view>
		</view>
		<view class="id">
			<view class="left">
				ID
			</view>
			<view class="right">
				{{id}}
			</view>
		</view>
		<view class="userPho nickname" @tap="goEditUserName">
			<view class="left">
				昵称
			</view>
			<view class="right">
				<view class="name">
					{{name}}
				</view>
				<view class="arrow">
					<image src="../../static/images/arrows-right.png" mode="scaleToFill"></image>
				</view>
			</view>
		</view>
		<view class="btn" @tap="save">
			保存
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:'',
				name:'',
				userLogo:"../../static/images/user.png"
			}
		},
		onLoad(e) {
			
		},
		onShow(e) {
			this.id = uni.getStorageSync('userId')
			this.name = uni.getStorageSync('nickName')
			this.userLogo = uni.getStorageSync('userLogo')
		},
		methods: {
			save(){
				let data = {
						  "logoUrl": this.userLogo,
						  "nickName": this.name,
					}
					console.log(data)
					this.$http.post('/api/v1.0/user/updateUserInfo',data,res=>{
						if(res.data.status == '000000'){
							uni.showToast({
							    title: '修改成功',
							    duration: 2000,
								icon:'none'
							});
							uni.setStorage({
								key:'userLogo',
								data:this.userLogo,
							})
							uni.setStorage({
								key:'nickName',
								data:this.name,
							})
							uni.navigateBack()
						}else{
							uni.showToast({
							    title: '修改失败',
							    duration: 2000,
								icon:'none'
							});
						}
					})
				
				
				
			},
			goEditUserName(){
				uni.navigateTo({
					url:'/pages/user/editUserName?name=' + this.name
				})
			},
			upLoad(){
				let _this = this;
				uni.chooseImage({
					count: 1,
				    success: (chooseImageRes) => {
				        const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.showLoading({
							title:'上传中'
						})
						_this.userLogo = tempFilePaths[0]
						let time = new Date().getFullYear() + "" + (new Date().getMonth() + 1) + "" + new Date().getDate(); //日期文件夹
						let  timestamp = Date.parse(new Date()) ;
						let fileType = tempFilePaths[0].substr(tempFilePaths[0].lastIndexOf('.'))
						var chars = ['0','1','2','3','4','5','6','7','8','9',"A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","X","Y","Z","a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "x", "y", "z"];
						function generateMixed(n) {
						     var res = "";
						     for(var i = 0; i < n ; i ++) {
						         var id = Math.ceil(Math.random()*59);
						         res += chars[id];
						     }
						     return res;
						}
						let name = generateMixed(32)
						let url = 'https://youchaojingpin.oss-cn-beijing.aliyuncs.com';
						let key = 'upload-images/' + time + '/' + name + timestamp + fileType;
						//上传oss
						_this.$http.uploadFile({
							url: url,
							filePath: tempFilePaths[0],
							fileType:"image",
							name:"file",
							formData:{
								'key': key,
								"policy":'eyJleHBpcmF0aW9uIjoiMjAyMC0wMS0wMVQxMjowMDowMC4wMDBaIiwiY29uZGl0aW9ucyI6W1siY29udGVudC1sZW5ndGgtcmFuZ2UiLDAsMTA0ODU3NjAwMF1dfQ==',
								'OSSAccessKeyId':"LTAIKqC9FPJAxqC1",
								'success_action_status':"200",
								'signature':'nsqumVKMZ1BcBRTacq8D1Q3yWag='
							},
							success: (res) => {
								if(res.statusCode == '200'){
									_this.$http.get('https://youchaojingpin.oss-cn-beijing.aliyuncs.com/'+ key,res2=>{
										if(res2.statusCode == '200'){
											this.userLogo = 'https://youchaojingpin.oss-cn-beijing.aliyuncs.com/'+ key
											uni.hideLoading()
										}
									})
								}
							}
						})
					}
				});
			}
			
		}
	}
</script>

<style lang="scss">
	.left{
		font-size:32upx;
		font-weight:500;
		color:rgba(51,51,51,1);
	}
	.userPho{
		height:140upx;
		background:rgba(255,255,255,1);
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding:0 38upx 0 28upx;
		.right{
			display: flex;
			align-items: center;
			.img{
				width: 80upx;
				margin-right: 20upx;
				image{
					width: 80upx;
					height: 80upx;
					background:rgba(246,78,106,1);
					border-radius:50% ;
				}
			}
			.name{
				margin-right: 16upx;
				font-size: 28upx;
			}
			.arrow{
				width: 22upx;
				image{
					width: 22upx;;
					height:22upx;;
				}
			}
		}
	}
	.id{
		padding:0 35upx 0 28upx;
		height:100upx;
		background:rgba(255,255,255,1);
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-top: 1upx solid #F0F0F0;
		border-bottom: 1upx solid #F0F0F0;
		.right{
			font-size: 28upx;
		}
	}
	.nickname{
		height: 100upx;
	}
	.btn{
		width:670upx;
		height:88upx;
		background:linear-gradient(0deg,rgba(232,39,27,1),rgba(250,94,52,1));
		border-radius:44px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size:36upx;
		font-weight:bold;
		color:rgba(255,255,255,1);
		position: absolute;
		bottom: 150upx;
		left:40upx;
	}
</style>
